import { ConfigProvider,Form, Input, Button, Table, Switch, Select, DatePicker } from 'antd';
import { useState } from 'react';
import zh_CN from 'antd/es/locale/zh_CN';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import './Css/Promontion.less'
import '../../css/public.less'
import LocationAlter from './child/LocationAlter';
import AddCommodity from './AddCommodity';
function CommodityManagement() {
    //表格数据类型
    interface DataType {
        key: React.Key; //id
        number: number //序号
        img: string //图片
        name: string; //商品名
        shopID: string //货号
        price: string //价格
        classify: string //分类
        salesVolume: number //销量
        address: string; //使用行程
        isPut: boolean //以未上架判断
    }
    //排序的方式名
    const [sortName,setSortName] = useState<{value:string,label:string}[]>([{ value: '升序', label: '升序' },{ value: '降序', label: '降序' }])
    //路由跳转
    const navigate = useNavigate()
    //查看弹框显示布尔值
    const [isModalOpen, setIsModalOpen] = useState(false);
    //点击位置按钮时的数据
    const [seat, setSeat] = useState<DataType | null>()
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'number',
        },
        {
            title: '商品图片',
            dataIndex: 'img',
            render: (_, v) => (
                <img
                    width={100}
                    height={50}
                    src={v.img} alt="" />
            )
        },
        {
            title: '货号',
            dataIndex: 'shopID',
        },
        {
            title: '价格',
            dataIndex: 'price',
        },
        {
            title: '分类',
            dataIndex: 'classify',
        },
        {
            title: '销量',
            dataIndex: 'salesVolume',
        },
        {
            title: '位置',
            dataIndex: 'address',
        },
        {
            title: '是否上架',
            dataIndex: 'isPut',
            render: (_, v) =>
            (
                <Switch
                    defaultChecked={v.isPut}
                    onChange={onChange}
                    onClick={() => { switchClick(v) }} />
            )
        },
        {
            title: '操作',
            dataIndex: 'address',
            width: 310,
            render: (_, v) => (
                <div className='operationList'>
                    <button className='man' onClick={() => { commodityBtn(v) }}>查看</button>
                    <button className='edit' onClick={() => { redactBtn(v) }}>位置</button>
                    <button className='del' onClick={() => { del(v.key) }}>删除</button>
                </div>
            )
        },
    ];
    //switch的change方法
    const onChange = (checked: boolean) => {
        // checked ? checked=true:checked=false
        console.log(`switch to ${checked}`);
    };
    //更改上架状态
    const switchClick = (v: {}) => {
        console.log(`switchClick事件获取到的`, v);
    }
    //点击进入查看
    const commodityBtn = (v: {}) => {
        console.log('查看点击 事件获取到的', v);
    }
    //点击位置显示弹框
    const redactBtn = (v:DataType) => {
        console.log('点击位置事件触发的', v)
        setIsModalOpen(true)
        setSeat(v)//存储位置数目
    }
    //让位置弹框关闭
    const closeModal = () => {
        setIsModalOpen(false)
    }
    //点击删除
    const del = (v: any) => {
        console.log('删除的点击事件触发', v);
    }
    //父组件存储子元素传过来的值的容器
    const [getValue,setGetValue] = useState<{}>()
    //父组件接受子组件值的方法
    const getChild=(val:{})=>{
        setGetValue(val)
        console.log('子组件传过来的值',getValue);
    }
    //表格方法(勾选的内容)
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    //用户数据
    const data: DataType[] = [
        {
            key: 1,//id
            number: 1,//序号
            img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',//商品图片
            name: `Edward King 1`,//商品名
            shopID: '32432434',//商品id
            price: '100',//价格
            classify: '生活垃圾',//分类
            salesVolume: 200,//销量
            address: '4',//位置
            isPut: true,
        },
        {
            key: 2,//id
            number: 2,//序号
            img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',//商品图片
            name: `Edward King 1`,//商品名
            shopID: '876878',//商品id
            price: '100',//价格
            classify: '厨余垃圾',//分类
            salesVolume: 200,//销量
            address: '2',//位置
            isPut: true,
        },
        {
            key: 3,//id
            number: 3,//序号
            img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',//商品图片
            name: `Edward King 1`,//商品名
            shopID: '172777',//商品id
            price: '100',//价格
            classify: '普通垃圾',//分类
            salesVolume: 200,//销量
            address: '1',//位置
            isPut: false,
        },
    ];
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        //switch勾选的内容
        console.log('selectedRowKeys changed switch勾选的内容: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        console.log('SelectedRowKeys', selectedRowKeys);
    };
    const rowSelection = {
        // selectedRowKeys,
        onChange: onSelectChange,
    };
    //跳转到添加商品页面
    const AddCommodityBtn=()=>{
        navigate('/home/promotion/AddCommodity')
    }
    return (
        <div className='Promotionma'>
            {/* 头部 */}
            <div className='page-top'>
                <div className='page-title'>
                    <p>促销</p>
                </div>
            </div>
            {/* 内容框 */}
            <div className='data-list'>
                <div className='headChoose'>
                    {/* 标题 */}
                    <p>商品列表</p>
                    <div>
                        {/* 排序方式 */}
                        <p style={{marginRight:"10px"}}>排序方式:</p>
                        <Select
                        style={{ width: 120 }}
                        options={sortName}
                        />
                        {/* 添加按钮 */}
                        <button className='add' onClick={AddCommodityBtn} style={{marginLeft:'10px'}}>添加商品</button>
                    </div>
                </div>
                <div className='contentType'>
                    <div style={{ marginBottom: 16 }}>
                    </div>
                    <ConfigProvider locale={zh_CN}>
                    <Table rowSelection={rowSelection}
                        columns={columns}
                        dataSource={data}
                        scroll={{ y: 444 }}
                        pagination={{
                            position: ['bottomCenter'],
                            defaultPageSize: 5,
                            pageSizeOptions: [3, 5, 10, 15],
                            showQuickJumper: true,
                            showSizeChanger: true,
                        }} />
                        </ConfigProvider>
                </div>
            </div>
            {/* 查看位置子组件 */}
            <LocationAlter getChild={getChild} isModalOpen={isModalOpen} closeModal={closeModal} seat={seat}></LocationAlter>
        </div>
    )
}
export default CommodityManagement
// 商品管理页面